<template>
  <div ref="container" class="model-container"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import * as THREE from 'three'

const props = defineProps({
  modelUrl: String
})

const container = ref(null)
let scene, camera, renderer

onMounted(() => {
  // 初始化场景
  scene = new THREE.Scene()
  camera = new THREE.PerspectiveCamera(75, container.value.offsetWidth / container.value.offsetHeight, 0.1, 1000)
  renderer = new THREE.WebGLRenderer({ antialias: true })
  
  // 加载模型
  const loader = new GLTFLoader()
  loader.load(props.modelUrl, (gltf) => {
    scene.add(gltf.scene)
    animate()
  })

  // 场景配置
  camera.position.z = 5
  renderer.setSize(container.value.offsetWidth, container.value.offsetHeight)
  container.value.appendChild(renderer.domElement)
})

const animate = () => {
  requestAnimationFrame(animate)
  renderer.render(scene, camera)
}
</script>

<style scoped>
.model-container {
  height: 600px;
  background: #1a1a1a;
  border-radius: 8px;
}
</style> 